<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org/">

<!--公共依赖头-->
<head th:fragment="commonHead(title,links,styles)">
    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="Uwd1bTRQsC"/>
    <title th:replace="${title}">Dragon's Twilight 龙之暮</title>
    <link rel="icon" th:href="@{/images/icon.png}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}">
    <!--live2d依赖-->
    <link rel="stylesheet" th:href="@{/live2d/live2d.css}"/>
    <style type="text/css">
        @font-face {
            font-family: Unifont;
            src: url("/fonts/unifont.ttf");
        }

        img {
            -webkit-user-drag: none;
        }

        .navSlot {
            display: inline-block;
            float: none;
            position: absolute;
            top: 15px;
            left: 333px
        }

        .navSlotButton {
            height: 40px;
            padding-left: 12px;
            padding-right: 12px;
            cursor: pointer;
        }

        .navSlotButtonLi:hover .navSlotButton {
            transform: translate(0, -5px);
        }

        .popover {
            background-color: #1b0c1b;
            color: #fff;
            border: #2c0863 1px solid;
        }

        .navSlotPick {
            height: 70px;
            margin-left: -5.8px;
            visibility: hidden
        }

        #loadingModal {
            background: #000000 no-repeat fixed center 0;
            width: 100%;
            height: 9999px;
            position: absolute;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;
            box-sizing: border-box;
            padding: 1px;
            z-index: 100000;
            opacity: 0.5;
            display: none;
        }

        body::-webkit-scrollbar {
            display: none;
        }


    </style>
    <!--可扩展块-->
    <th:block th:replace="${links}"/>
    <th:block th:replace="${styles}"/>
    <!--遮罩层-->
</head>

<div th:fragment="commonContent()">
    <!-- loading -->
    <div id="loadingModal">
    </div>
</div>

<!--尾部导航栏-->
<!--备案信息-->
<nav th:fragment="commonNavFoot(a)" id="footNav" class="navbar navbar-fixed-bottom navbar-transparent"
     role="navigation"
     style="min-height: 22px; text-align: center;">
    <div class="container" style="position: relative">
        <ul class="nav navbar-nav" style="display: inline-block;float: none;">
            <li><img id="slotIndex" src="/images/indexButton/slotMaster.png" alt="首页"></li>
            <li><img src="/images/indexButton/slotNav.png" alt="物品栏"></li>
        </ul>
        <ul class="nav navbar-nav navSlot" style="left: 264px">
            <li class="navSlotButtonLi"><img class="navSlotButton" style="" data-toggle="popover" data-content="首页"
                                             src="/images/indexButton/navButton/index.png"
                                             onclick="toLink(getRootPath())" alt="首页"></li>

        </ul>
        <ul class="nav navbar-nav navSlot" style="left:335px;top: 0">
            <li><img alt="" class="navSlotPick" id="mapPick" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="registerPick" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd2" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd3" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd4" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd5" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd6" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="dd7" src="/images/indexButton/slotPick.png"></li>
            <li><img alt="" class="navSlotPick" id="adminPick" src="/images/indexButton/slotPick.png"></li>
        </ul>
        <ul class="nav navbar-nav navSlot">
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="地图"
                                             src="/images/indexButton/navButton/map.png"
                                             onclick="toLink(getRootPath()+'iframe/map')"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="账号"
                                             src="/images/indexButton/navButton/totem.png"
                                             onclick="toLink(getRootPath()+'register')"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/diamond_sword.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/compass_10.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/acacia_boat.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/apple.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/iron_ingot.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="暂无"
                                             src="/images/indexButton/navButton/iron_pickaxe.png"></li>
            <li class="navSlotButtonLi"><img alt="" class="navSlotButton" data-toggle="popover" data-content="管理"
                                             src="/images/indexButton/navButton/book_writable.png"
                                             onclick="toLink(getRootPath()+'admin/index')"></li>
        </ul>
        <!--<div class="navbar-right">
            <img id="serverStatusImg" alt="服务器状态" src="/images/serverStatus/serverOffline.png">
            <span id="serverStatusCount"
                  style="color:red;font-family: Unifont,serif;font-size: 14px;font-weight: bold">?</span>
        </div>-->
        <!--<div class="navbar-right">
            <a href="http://www.beian.miit.gov.cn/" target="_blank">湘ICP备19013886号</a>
        </div>-->
    </div>
    <!--隐藏传值-->
    <span id="activeSlot" style="display: none" th:text="${activeSlot}">index</span>
    <!--左下角小埋-->
    <div id="landlord">
        <!--    <div id="liveMessage" class="message" style="opacity:0"></div>-->
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <!--    <div id="hiddenButton" class="hide-button">隐藏</div>-->
    </div>

</nav>

<!--公共依赖尾-->
<div th:fragment="commonFoot(scripts)">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <!--live2d依赖-->
    <script type="text/javascript" th:src="@{/live2d/live2d.js}"></script>
    <script type="text/javascript" th:src="@{/live2d/message.js}"></script>
    <script>
        $(function () {
            $('input').attr('autocomplete', 'off');

            //导航栏选中
            const activeSlot = $("#activeSlot").text();
            if (activeSlot != null && activeSlot !== "" && typeof activeSlot != "undefined") {
                if (activeSlot === "indexPick") {
                    $("#slotIndex").attr("src", "/images/indexButton/slotPick.png");
                } else {
                    $("#" + activeSlot).css("visibility", "visible");
                }
            }

            //物品栏悬浮
            $(".navSlotButton").popover({
                placement: 'top',
                trigger: 'hover'
            });

        });

        //跳转
        function toLink(url, isTarget) {
            if (isTarget) {
                window.open(url);
            } else {
                window.location.href = url;
            }
        }

        //获取服务器原始地址
        function getRootPath() {
            return window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/";
        }

        /*全局遮罩层*/
        function showModal(action) {
            let $loadingModal = $("#loadingModal");
            if (action) {
                $loadingModal.css('display', 'block');
                // $loadingModal.modal('show');
            } else {
                $loadingModal.css('display', 'none');
                // $loadingModal.modal('hide');
            }
        };
    </script>
    <!--可扩展块-->
    <th:block th:replace="${scripts}"/>
</div>
</html>